<template>
    <div class="home-content">
        <van-pull-refresh
            v-model="isLoading"
            @refresh="onRefresh"
            success-duration="1000"
        >
            <!-- 轮播图组件 -->
            <swipe ref="swipe" :id="type.id" />
            <!-- 横向滑块组件 -->
            <slide-bar ref="slideBar" />
            <!-- 热门推荐 -->
            <hot-movie ref="hotMovie" />
            <!-- 分类栏 -->
            <category-bar ref="categoryBar" />
        </van-pull-refresh>
    </div>
</template>

<script>
import swipe from './components/swipe.vue';
import slideBar from './components/slideBar.vue';
import CategoryBar from './components/CategoryBar.vue';
import hotMovie from './components/hotMovie.vue';
export default {
    name: 'handpick',
    props: {
        type: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            isLoading: false
        };
    },
    methods: {
        async onRefresh() {
            try {
                await this.$refs.swipe.getSwipeImg();
                this.$toast('刷新成功');
            } catch (error) {
                this.$toast.success('刷新失败，请稍后重试');
            }

            this.isLoading = false;
        }
    },
    components: {
        swipe,
        slideBar,
        CategoryBar,
        hotMovie
    }
};
</script>

<style scoped lang="scss">
.home-content {
    height: 79vh;
    overflow-y: auto;
    background-color: #eeeeee;
}
</style>
